<script setup>
import {ref, reactive, onUnmounted} from 'vue';
import { useRouter } from 'vue-router'
import userApi from '../api/User_api.js'
import { ElMessage } from 'element-plus'

const form = reactive({
  userNumber: '',
  email: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
});

const router = useRouter();
const sending = ref(false);
const countdown = ref(0);
const timer = ref(null);

// 发送验证码
const sendVerificationCode = async () => {
  if (!form.userNumber) {
    ElMessage.warning('请输入账号');
    return;
  }
  if (!form.email) {
    ElMessage.warning('请输入邮箱');
    return;
  }

  sending.value = true;
  try {
    const res = await userApi.sendEmailCode({
      userNumber: form.userNumber,
      email: form.email
    });
    console.log(res.code);
    if (res.code === 200 || res.code==null) {
      ElMessage.success('验证码发送成功');
      // 开始倒计时
      countdown.value = 60;
      timer.value = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer.value);
        }
      }, 1000);
    } else {
      ElMessage.error(res.message || '发送验证码失败');
    }
  } catch (error) {
    console.error('发送验证码失败', error);
    ElMessage.error('发送验证码失败');
  } finally {
    sending.value = false;
  }
}

// 重置密码
const onSubmit = async () => {
  if (form.newPassword !== form.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  if (form.newPassword.length < 6 || form.newPassword.length > 16) {
    ElMessage.error('密码长度应在6-16位之间');
    return;
  }

  try {
    const res = await userApi.resetPasswordByEmail({
      userNumber: form.userNumber,
      email: form.email,
      code: form.code,
      newPassword: form.newPassword,
      confirmPassword: form.confirmPassword
    });

    if (res.code === 200 || res.code==null) {
      ElMessage.success('密码重置成功');
      router.push('/login');
    } else {
      ElMessage.error(res.message || '密码重置失败');
    }
  } catch (error) {
    console.error('密码重置失败', error);
    ElMessage.error('密码重置失败');
  }
}

// 清理定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<template>
  <div class="reset-password-container">
    <h2>通过邮箱验证码重置密码</h2>
    <el-form :model="form" label-width="120px" style="max-width: 500px">
      <el-form-item label="用户账号">
        <el-input v-model="form.userNumber" placeholder="请输入您的账号"></el-input>
      </el-form-item>
      <el-form-item label="注册邮箱">
        <el-input v-model="form.email" placeholder="请输入注册时使用的邮箱"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <div style="display: flex; gap: 10px">
          <el-input v-model="form.code" placeholder="请输入验证码" style="flex: 1"></el-input>
          <el-button
              :disabled="sending || countdown > 0"
              @click="sendVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}秒后重新发送` : '发送验证码' }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
            v-model="form.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
            v-model="form.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">重置密码</el-button>
        <el-button @click="router.push('/login')">返回登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.reset-password-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 30px;
  text-align: center;
  color: #409EFF;
}
</style>